<template>
  <div class="directory-item">
    <div
      class="flex items-center py-2 px-3 hover:bg-gray-50 rounded-lg"
      :class="{ 'bg-blue-50': selectedItem && selectedItem.id === item.id }"
    >
      <i
        class="fas fa-chevron-right cursor-pointer transform transition-transform mr-2"
        :class="{ 'rotate-90': item.expanded }"
        @click="$emit('toggle-expand', item)"
      ></i>
      <span class="flex-1" @click="$emit('select-item', item)">{{
        item.name
      }}</span>
      <div
        class="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity"
      >
        <button
          class="!rounded-button text-blue-600 hover:bg-blue-50 p-1"
          @click="$emit('edit-item', item)"
        >
          <i class="fas fa-edit"></i>
        </button>
        <button
          class="!rounded-button text-blue-600 hover:bg-blue-50 p-1"
          @click="$emit('add-sub-item', item)"
        >
          <i class="fas fa-plus"></i>
        </button>
        <button
          class="!rounded-button text-red-600 hover:bg-red-50 p-1"
          @click="$emit('delete-item', item)"
        >
          <i class="fas fa-trash"></i>
        </button>
      </div>
    </div>
    <div
      v-if="item.expanded && item.children && item.children.length"
      class="ml-6"
    >
      <directory-item
        v-for="child in item.children"
        :key="child.id"
        :item="child"
        :selected-item="selectedItem"
        @toggle-expand="$emit('toggle-expand', $event)"
        @select-item="$emit('select-item', $event)"
        @edit-item="$emit('edit-item', $event)"
        @add-sub-item="$emit('add-sub-item', $event)"
        @delete-item="$emit('delete-item', $event)"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "DirectoryItem",
  props: {
    item: {
      type: Object,
      required: true,
    },
    selectedItem: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {};
  },

  methods: {},
};
</script>

<style lang="scss" scoped></style>
